import {useState} from 'react'

import {useEventListener, useIsomorphicLayoutEffect} from 'ahooks'

/**
 * 获取1rem对应的px值
 */
function useBaseFontSize(): number {
    const [baseFontSize, setBaseFontSize] = useState<number>(1)

    const handleSize = () => {
        setBaseFontSize(document.documentElement.clientWidth / 1920)
    }

    useEventListener('resize', handleSize)

    // Set size at the first client-side load
    useIsomorphicLayoutEffect(() => {
        handleSize()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return baseFontSize
}

export default useBaseFontSize
